const vscode = require('vscode');

/**
 * 欢迎视图提供器
 */
class WelcomeViewProvider {
	/**
	 * @param {vscode.WebviewView} webviewView
	 */
	resolveWebviewView(webviewView) {
		webviewView.webview.options = {
			enableScripts: true
		};

		webviewView.webview.html = this._getHtmlContent();

		// 监听来自 webview 的消息
		webviewView.webview.onDidReceiveMessage(message => {
			if (message.command === 'showWelcome') {
				vscode.window.showInformationMessage('🎉 欢迎你！');
			}
		});
	}

	_getHtmlContent() {
		return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>欢迎</title>
	<style>
		body {
			padding: 20px;
			font-family: var(--vscode-font-family);
			color: var(--vscode-foreground);
		}
		.welcome-container {
			text-align: center;
			padding: 40px 20px;
		}
		button {
			background-color: var(--vscode-button-background);
			color: var(--vscode-button-foreground);
			border: none;
			padding: 10px 20px;
			font-size: 14px;
			cursor: pointer;
			border-radius: 4px;
		}
		button:hover {
			background-color: var(--vscode-button-hoverBackground);
		}
	</style>
</head>
<body>
	<div class="welcome-container">
		<button onclick="showWelcome()">点击显示欢迎</button>
	</div>
	<script>
		const vscode = acquireVsCodeApi();
		function showWelcome() {
			vscode.postMessage({ command: 'showWelcome' });
		}
	</script>
</body>
</html>`;
	}
}

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('你好，插件已经启动！');

	// 注册命令
	const disposable = vscode.commands.registerCommand('my-first-ext.helloWorld', function () {
		vscode.window.showInformationMessage('Hello World from my-first-ext!');
	});

	// 注册侧边栏视图
	const provider = new WelcomeViewProvider();
	context.subscriptions.push(
		vscode.window.registerWebviewViewProvider('welcomeView', provider)
	);

	context.subscriptions.push(disposable);
}

// This method is called when your extension is deactivated
function deactivate() {}

module.exports = {
	activate,
	deactivate
}
